import { SetupContext, defineComponent, inject, onMounted, ref } from 'vue';
import { ExtendCalendarPropsType, ExtendCalendarProps } from '../extend-calendar.props';
import { DesignerItemContext } from '../../../designer-canvas/src/types';
import { useDesignerComponent } from '../../../designer-canvas/src/composition/function/use-designer-component';
import calendarWeek from '../components/calendar-week.component';
import calendarDay from '../components/calendar-day.component';
import calendarAction from '../components/calendar-action.component';
import calendarTask from '../components/calendar-task.component';
import '../extend-calendar.css';
export default defineComponent({
    name: 'FExtendCalendarDesign',
    props: ExtendCalendarProps,
    setup(props: ExtendCalendarPropsType, context: SetupContext) {
        const elementRef = ref();
        const designItemContext = inject<DesignerItemContext>('design-item-context') as DesignerItemContext;
        const componentInstance = useDesignerComponent(elementRef, designItemContext);
        onMounted(() => {
            elementRef.value.componentInstance = componentInstance;
        })
        context.expose(componentInstance.value);

        const renderWeek = calendarWeek(props,context);
        const {renderDay,date,selftDate,visible,switchCalendarDates,dateTask} = calendarDay(props,context);
        const renderAction = calendarAction(props,context,date,selftDate,visible,switchCalendarDates);
        const renderTask = calendarTask(props,context,dateTask);
        return () => {
            return <div ref={elementRef} class='drag-container' dragerf={`${designItemContext.schema.id}-container`}>
                <div class='f-extend-calendar'>
                    {renderAction()}
                    {renderWeek()}
                    {renderDay()}
                    {renderTask()}
                </div>
            </div>;
        };
    }
});